<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		body{
			background: #ccc;
			font-family: Geneva,Arial,Helvetica,sans-serif;
		}
		ul,li,p,dl,dt,h1,h2,h3,h4,h5,h6{
			margin:0;
			padding:0;
		}
		ul,li{
			list-style: none;
		}
		#box{
			width:900px;
			height:536px;
			border:3px solid #fff;
			margin:0 auto;
		}
		.head{
			height:82px;
			background:#f47d31;
			text-align: center;
			font-size:52px;
			line-height:82px;
			color:#fff;
		}
		.sec{
			height:388px;
			background:#888;
			padding:10px 0 10px 0;
		}
		nav{
			width:217px;
			color:#fff;
			padding-left:3px;
			padding-right:15px;
			float:left;
			height:100%;
		}
		nav h3{
			color:#fff;
			text-align: center;
		}
		nav li{
			height:43px;
			line-height:43px;
			color:#f47d31;
			border-bottom:3px solid #fff;
			text-indent:10px;
		}
		.main{
			width:430px;
			float:left;
		}
		.art1{
			height:195px;
			width:410px;
			background:#eee;
			padding:10px;
			margin-bottom:10px;
			float:left;
		}
		.art2{
			height:143px;
			width:410px;
			padding:10px;
			background:#eee;
			float:left;
		}
		.art1 header,.art2 header{
			height:31px;
			font-size:13px;
			color:#fff;
			text-align: center;
			background:#f47d31;
			line-height:31px;
		}
		.art1 div{
			height:120px;
			padding-top:18px;
			font-size:12px;
			font-weight: 600;
		}
		.art2 div{
			height:68px;
			padding-top:18px;
			font-size:12px;
			font-weight: 600;
		}
		.art1 footer,.art2 footer{
			height:26px;
			font-size:10px;
			text-align: center;
			color:#fff;
			background:#f47d31;
			line-height:26px;
		}
		aside{
			width:185px;
			height:100%;
			float:right;
			color:#fff;
			clear: right:;
			padding-left:25px;
			padding-right:25px;
		}
		aside p{
			font-style: italic;
			font-size: 12px;
			font-weight: 600;
		}
		aside h3{
			text-align: center;
			margin-bottom:20px;
		}
		.foot{
			height:46px;
			background:#f47d31;
		}
		.p1{
			margin-bottom:18px;
		}
	</style>
</head>
<body>
	<div id="box">
		<header class="head">Header</header>
		<section class="sec">
			<nav>
				<h3>Nav</h3>
				<ul>
					<li>Link1</li>
					<li>Link1</li>
					<li>Link1</li>
				</ul>
			</nav>
			<section class="main">
				<article class="art1" >
					<header>
						<h3>Article Header</h3>
					</header>
					<div>
						<p class="p1">
							Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna.
						</p>
						<p>
							Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.
						</p>
					</div>
					<footer>
						<h3>Article Footer</h3>
					</footer>
				</article>
				<article class="art2" >
					<header>
						<h3>Article Header</h3>
					</header>
					<div>
						<p>
							HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio
						</p>
					</div>
					<footer>
						<h3>Article Footer</h3>
					</footer>
				</article>
			</section>
			<aside>
				<h3>Aside</h3>
				<p>
					HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio rhoncus
				</p>
			</aside>
		</section>
		<footer class="foot"></footer>
	</div>
</body>
</html>
